<template>
  <div class="require-login-example">
    <h3>需要登录的功能示例</h3>
    
    <div class="example-buttons">
      <!-- 普通按钮 - 不检查登录 -->
      <el-button type="primary" @click="handleNormalAction">普通功能</el-button>
      
      <!-- 需要登录的按钮1 - 直接检查并显示登录弹窗 -->
      <el-button type="success" @click="handleLoginRequiredAction">
        需要登录的功能
      </el-button>
      
      <!-- 需要登录的按钮2 - 使用可组合函数 -->
      <el-button type="warning" @click="handleComposableLoginAction">
        使用组合式API的登录功能
      </el-button>
    </div>
    
    <div class="user-info" v-if="currentUser">
      <p>当前登录用户: {{ currentUser.name }}</p>
      <el-button type="danger" @click="handleLogout">退出登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../stores/user'
import { checkLogin, showLogin, useLoginCheck } from '../utils/auth.js'

// 定义组件名称
defineOptions({
  name: 'RequireLoginExample'
})

// 用户信息
const currentUser = ref(null)
const userStore = useUserStore()

// 使用登录检查组合式函数
const { isLoggedIn, checkAndPerform } = useLoginCheck()

onMounted(() => {
  updateUserInfo()
})

// 更新用户信息
const updateUserInfo = () => {
  if (userStore.isLoggedIn) {
    currentUser.value = userStore.userInfo
  } else {
    currentUser.value = null
  }
}

// 普通功能 - 不需要登录
const handleNormalAction = () => {
  ElMessage.info('这是一个不需要登录的普通功能')
}

// 需要登录的功能 - 直接检查并显示登录弹窗
const handleLoginRequiredAction = () => {
  if (checkLogin()) {
    // 已登录，执行需要登录的操作
    ElMessage.success('您已登录，可以执行需要登录的操作')
    performLoginRequiredTask()
  } else {
    // 未登录，显示登录弹窗
    ElMessage.warning('请先登录')
    showLogin()
  }
}

// 使用组合式API的登录功能
const handleComposableLoginAction = () => {
  checkAndPerform(() => {
    // 登录成功后执行的操作
    ElMessage.success('使用组合式API登录成功')
    performLoginRequiredTask()
  })
}

// 执行需要登录的任务
const performLoginRequiredTask = () => {
  // 这里是需要登录才能执行的任务
  console.log('执行需要登录的任务...')
  ElMessage.success('已执行需要登录的任务')
}

// 退出登录
const handleLogout = () => {
  userStore.logout()
  updateUserInfo()
  ElMessage.success('退出登录成功')
}
</script>

<style scoped>
.require-login-example {
  padding: 20px;
  background: #1e2124;
  border-radius: 4px;
  color: #fff;
}

.example-buttons {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.user-info {
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info p {
  margin: 0;
}
</style>